<template>
  <view class="tool-wrap">
    <input class="ipt" type="text" v-model="city" placeholder="输入城市，如 上海" placeholder-class="ph" />
    <button class="btn" @tap="load">查询（原型）</button>
    <view v-if="data" class="card">
      <text class="row">城市：{{ data.city }}</text>
      <text class="row">温度：{{ data.temp }}°C</text>
      <text class="row">天气：{{ data.text }}</text>
    </view>
    <text class="hint">原型演示：使用本地假数据。</text>
  </view>
</template>

<script>
export default {
  name: 'WeatherLite',
  data() { return { city: '上海', data: null } },
  methods: {
    load() {
      this.data = { city: this.city, temp: (18 + Math.random()*12).toFixed(1), text: ['晴','多云','小雨'][Math.floor(Math.random()*3)] }
    }
  }
}
</script>

<style>
.tool-wrap { display: grid; gap: 12rpx; }
.ipt { height: 64rpx; border-radius: 20rpx; padding: 0 20rpx; color: #e9ecff; background: rgba(255,255,255,.06); border: 2rpx solid rgba(255,255,255,.12); }
.ph { color: #a7b0d9; }
.btn { height: 60rpx; border-radius: 20rpx; border: 2rpx solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #e9ecff; font-size: 24rpx; }
.card { background: rgba(255,255,255,.05); border: 2rpx solid rgba(255,255,255,.08); border-radius: 24rpx; padding: 20rpx; }
.row { margin-top: 6rpx; }
.hint { color: #a7b0d9; }
</style>


